<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苗管家</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
            position: relative;
        }
        header h1 {
            margin: 0;
        }
        .admin-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        .admin-btn:hover {
            background-color: #3e8e41;
        }
        main {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        .carousel {
            width: 100%;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .carousel-slide {
            flex-shrink: 0;
            width: 100%;
            height: 300px;
            background-position: center;
            background-size: cover;
        }
        article {
            background-color: #f7f7f7;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            text-align: center; /* 居中对齐文章内容 */
        }
        article h2 {
            margin-top: 0;
            text-align: center; /* 居中对齐标题 */
        }
        article img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            margin-bottom: 10px;
        }
        a {
            color: #333; /* 修改超链接颜色 */
            text-decoration: none; /* 去掉下划线 */
        }
        a:hover {
            cursor: pointer; /* 鼠标悬停时显示小手图标 */
        }
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            clear: both;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let carousel = document.querySelector('.carousel-inner');
            let slides = document.querySelectorAll('.carousel-slide');
            let slideWidth = slides[0].clientWidth;

            function updateCarousel() {
                slideWidth = slides[0].clientWidth;
                carousel.style.transform = `translateX(-${slideWidth}px)`;
            }

            setInterval(() => {
                carousel.style.transform = `translateX(-${slideWidth * 2}px)`;
                setTimeout(() => {
                    carousel.style.transform = `translateX(-${slideWidth}px)`;
                }, 500);
            }, 3000);

            window.addEventListener('resize', updateCarousel);
            updateCarousel();
        });
    </script>
</head>
<body>
<header>
    <h1>苗管家</h1>
    <button class="admin-btn" onclick="location.href='/admin'">进入后台管理系统</button>
</header>
<main>
    <div class="carousel">
        <div class="carousel-inner">
            <div class="carousel-slide" style="background-image: url('https://picsum.photos/1920/1080');"></div>
            <div class="carousel-slide" style="background-image: url('https://picsum.photos/1920/1081');"></div>
            <div class="carousel-slide" style="background-image: url('https://picsum.photos/1920/1082');"></div>
        </div>
    </div>

    <article>
        <h2><a href="https://en.wikipedia.org/wiki/Seedling" target="_blank">种子育苗的重要性</a></h2>
        <img src="https://picsum.photos/200/300" alt="种子育苗">
        <p>种子育苗是农业生产的基石环节，直接影响作物产量和质量。良好的育苗环境可以提高种子发芽率、生长速度和抗病性，从而提升作物产量和质量。</p>
    </article>
    <article>
        <h2><a href="https://www.agriculture.com/seeds" target="_blank">如何选择适合的种子</a></h2>
        <img src="https://picsum.photos/200/301" alt="种子选择">
        <p>选择合适的种子是育苗生产的关键步骤。考虑因素包括种子品种、质量和适应性。还需要了解种子储存和处理方法，以确保种子活力和质量。</p>
    </article>
    <article>
        <h2><a href="https://www.gardeningknowhow.com/edible/vegetables/tomato/growing-tomato-seedlings.htm" target="_blank">种子育苗的常见问题</a></h2>
        <img src="https://picsum.photos/200/302" alt="种子育苗问题">
        <p>育苗过程中常见的问题包括种子发芽不良、生长缓慢和病虫害。这些问题可以通过调整种子储存和处理方法以及改善育苗环境来解决。</p>
    </article>
    <article>
        <h2><a href="https://www.greenhousegrower.com/technology/greenhouse-environmental-control/" target="_blank">大棚育种的常见问题</a></h2>
        <img src="https://picsum.photos/200/303" alt="大棚育种问题">
        <p>温室育苗过程中常见的问题包括温度波动、湿度控制和病虫害管理。这些问题可以通过使用先进的气候控制系统、实施综合病虫害管理策略和定期监测育苗健康来解决。</p>
    </article>
    <article>
        <h2><a href="https://www.precisionag.com/technology/automation/automated-greenhouse-growing-systems/" target="_blank">种子育苗的自动化技术</a></h2>
        <img src="https://picsum.photos/200/304" alt="种子育苗自动化">
        <p>自动化技术可以提高育苗生产效率和质量。自动化技术的例子包括机器人播种、自动灌溉系统和计算机化气候控制系统。</p>
    </article>
    <article>
        <h2><a href="https://www.greenhousegrower.com/technology/future-of-greenhouse-technology/" target="_blank">大棚育种的未来发展趋势</a></h2>
        <img src="https://picsum.photos/200/305" alt="大棚育种未来发展">
        <p>温室育苗的未来发展趋势包括使用人工智能、物联网技术和生物技术来提高育苗质量和生产效率。</p>
    </article>
    <article>
        <h2><a href="https://www.agriculture.com/business/economic-analysis-of-seedling-production" target="_blank">种子育苗的经济效益分析</a></h2>
        <img src="https://picsum.photos/200/306" alt="种子育苗经济效益">
        <p>育苗生产的经济效益分析可以帮助农民和农业企业了解不同育苗生产方法的成本和收益，做出明智的决策。</p>
    </article>
    <article>
        <h2><a href="https://www.greenhousegrower.com/environment/environmental-impact-assessment-of-greenhouse-seedling-production/" target="_blank">大棚育种的环境影响评估</a></h2>
        <img src="https://picsum.photos/200/307" alt="大棚育种环境影响">
        <p>温室育苗的环境影响评估可以帮助识别潜在的环境风险，并制定缓解策略。</p>
    </article>
    <article>
        <h2><a href="https://www.agriculture.com/crops/best-practices-for-seedling-production" target="_blank">最佳育苗实践</a></h2>
        <img src="https://picsum.photos/200/308" alt="最佳育苗实践">
        <p>介绍最佳育苗实践，包括土壤准备、播种技巧和病虫害防治。</p>
    </article>
    <article>
        <h2><a href="https://www.greenhousegrower.com/technology/advanced-climate-control-systems-for-greenhouses/" target="_blank">先进的气候控制系统</a></h2>
        <img src="https://picsum.photos/200/309" alt="先进的气候控制系统">
        <p>介绍先进的气候控制系统，如何通过精确控制温度、湿度和光照来优化育苗环境。</p>
    </article>
    <article>
        <h2><a href="https://www.agriculture.com/technology/precision-agriculture-techniques" target="_blank">精准农业技术的应用</a></h2>
        <img src="https://picsum.photos/200/310" alt="精准农业技术">
        <p>介绍精准农业技术的应用，包括传感器、无人机和数据分析工具，如何提高农业生产效率和可持续性。</p>
    </article>
    <article>
        <h2><a href="https://www.gardeningknowhow.com/edible/vegetables/tomato/growing-tomato-seedlings-indoors.htm" target="_blank">室内育苗的优势</a></h2>
        <img src="https://picsum.photos/200/311" alt="室内育苗">
        <p>室内育苗可以在受控环境中进行，避免外部环境的影响，提高育苗成功率和质量。</p>
    </article>
    <article>
        <h2><a href="https://www.greenhousegrower.com/technology/sustainable-greenhouse-design/" target="_blank">可持续温室设计</a></h2>
        <img src="https://picsum.photos/200/312" alt="可持续温室设计">
        <p>介绍可持续温室设计的原则和技术，如何通过节能减排和资源循环利用来实现可持续发展。</p>
    </article>
    <article>
        <h2><a href="https://www.agriculture.com/technology/vertical-farming-techniques" target="_blank">垂直农业技术</a></h2>
        <img src="https://picsum.photos/200/313" alt="垂直农业技术">
        <p>介绍垂直农业技术，如何在有限的空间内高效种植作物，提高土地利用率。</p>
    </article>
    <footer>
        &copy; 2023 苗管家. All rights reserved.
    </footer>
</main>
</body>
</html>
